<template>
	<view class="">
		<view class="grouplist" v-for="(item,index) in list" @tap="clustering(index)">
			<view class="grouplist_member_header">
				<image v-for="(items,key) in item.member" :src="items.pic" mode=""></image>
			</view>
			<view class="grouplist_residue">
				<view class="grouplist_residue_l">
					<view class="grouplist_residue_l_t">
						还差{{3-item.member.length}}人成团
					</view>
					<view class="grouplist_residue_l_b">
						<uni-countdowno :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdowno>
					</view>
				</view>
				<view class="grouplist_residue_r">
					去拼团
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCountdowno from '@/components/uni-countdown/uni-countdown1.vue';
	export default {
		components:{uniCountdowno},
		data () {
			return {
				list: [
					{
						createm: '2020.01.03',
						member: [
							{
								pic: '../../static/image/mine/header.png'
							},
							{
								pic: '../../static/image/mine/header.png'
							}
						]
					},
					{
						createm: '2020.01.03',
						member: [
							{
								pic: '../../static/image/mine/header.png'
							}
						]
					}
				]
			}
		},
		methods: {
			clustering (index) {
				this.$emit('clustering', index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.grouplist {
		width: calc(100% - 30upx);
		height: 116upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: auto;
		margin-bottom: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.grouplist_member_header {
		height: 76upx;
		image {
			width: 76upx;
			height: 76upx;
			border-radius: 50%;
			margin-right: 10upx;
		}
	}
	.grouplist_residue {
		display: flex;
		align-items: center;
		.grouplist_residue_l_t {
			font-size: 24upx;
			color: #999999;
		}
		.grouplist_residue_l_b {
			text-align: center;
			font-size: 24upx;
			color: #333333;
			margin-top: 6upx;
		}
		.grouplist_residue_r {
			width: 148upx;
			height: 52upx;
			background: linear-gradient(to right, #f73f2f 0%, #fc5c2f 100%);
			border-radius: 26upx;
			font-size: 28upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52upx;
			box-shadow: 0 0 6upx 0 #fc5c2f;
			margin-left: 20upx;
		}
	}
</style>
